<template>
<div id="CommonHeader">
    <div id="left">
        <el-button size="default" :icon="Menu" @click="$store.commit('Aside/updataIsCollapse')"></el-button>
        <el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb">
            <el-breadcrumb-item v-for="(item, index) in routerPahtList" :key="index" :to="{ path: item.path }">{{ item.label }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div id="right">
        <el-dropdown @command="commandClick">
            <span class="el-dropdown-img">
                <img :src="userPic" alt="">
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item command="outLogin">退出登陆</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</div>
</template>

<script>
import { Menu } from '@element-plus/icons-vue'
import router from '../../router'
import { useStore } from 'vuex'
import { ArrowRight } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { defineComponent, reactive, toRefs, computed } from 'vue'
export default defineComponent({
    name: 'CommonHeader',
    setup() {
        const store = useStore()
        function routerPathDataFunc(){ // 路由路径数据
            const routerdata = router.options.routes // 路由配置数据

            function fore(dataArray, pathstr){ // 循环递归提取路由配置数据的函数
                const data = []

                for (let i = 0; i < dataArray.length; i++) {
                    const datae = {}

                    datae.label = dataArray[i].meta.label
                    
                    datae.path = '/' + pathstr + '/' +dataArray[i].path // 拼接路径
                    datae.path = datae.path.replace(/(\/)(\1)+/g, '/') // 将 '/' 连续出现两次以上的地方替换成单个 '/'

                    if(dataArray[i].children){ // 如果有子路由则循环提取子路由数据
                        datae.children = fore(dataArray[i].children, datae.path)
                    }

                    data.push(datae)
                }

                return data
            }

            return fore(routerdata[0].children, '')
        }
        const routerPahtList = computed(()=>{
            const routerPathData = routerPathDataFunc()
            const routerPaht = store.state.Tag.routerPaht.path

            function fors(path, pathData, data = {
                index: -1,
                arr: [],
                as: false,
            }){
                data.index++;
                for (let i = 0; i < pathData.length; i++) {

                    data.arr[data.index] = {
                        label: pathData[i].label,
                        path: pathData[i].path
                    }

                    if(pathData[i].path === path){
                        data.as = true
                        data.arr.splice(data.index+1, 1)
                        break;
                    }else if(pathData[i].children){
                        fors(path, pathData[i].children, data)
                        if(data.as) break;
                    }
                }
                if(!data.as) data.index--;

                return data
            }

            const dropdownData = fors(routerPaht, routerPathData).arr
            if(dropdownData[0].path !== '/home') dropdownData.unshift({ label: "首页", path: "/home" })
            return dropdownData
        })
        function commandClick(key){ // 点击头像下拉菜单项
            if(key === 'outLogin'){
                outLogin()
            }
        }
        function outLogin(){ // 退出登陆函数
            ElMessageBox.confirm('确定退出登陆吗？', '提示',{
                type:'warning',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(()=>{
                store.commit('user/ISLOGIN', false)
                store.commit('user/init_userinfo')
                router.push({ path:'/login' })
            },()=>{})
        }
        const data = reactive({
            userPic: new URL('../../assets/images/userPic.jpg', import.meta.url).href, // 用户头像
            routerPahtList,
        })
        return {
            ...toRefs(data),
            Menu,
            ArrowRight,
            commandClick,
            outLogin
        }
    },
})
</script>

<style scoped>
#CommonHeader{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#left{
    display: flex;
    align-items: center;
}
.breadcrumb{
    margin-left: 20px;
}
.el-dropdown-img img{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #1e90ff;
}
</style>